<template>
  <div class="good">
    <div class="goods banxin">
      <p>首页 / 全部商品</p>
      <img src="../assets/images/products/banner.png" alt />
      <section class="list">
        <div>
          <strong>排序 ：</strong>
          <span
            v-for="(item, index) in paixuArr"
            :key="index"
            :class="{ active: paixuActive == index }"
            @click="changePaixu(item.min, item.max, index)"
          >{{ item.txt }}</span>
        </div>
        <div>
          <strong>分类 ：</strong>
          <span
            v-for="(item, index) in fenleiArr"
            :key="index"
            :class="{ active: fenleiActive == index }"
            @click="changeFenlei(item.value, index)"
          >{{ item.txt }}</span>
        </div>
      </section>
      <Products :arr="goodsListShow" />
      <div style="text-align: center; font-size: 20px; color: red;">{{ isReachBottom ? "还急不急....." : "你先别急!!!"}}</div>
    </div>
  </div>
</template>

<script>
import Products from "@/components/Products.vue";
import { GoodsDataApi } from "@/request/api";
import { mapState, mapMutations } from "vuex";
import { getScrollTop, getClientHeight, getScrollHeight } from "@/utils";
export default {
  data() {
    return {
      paixuActive: 0,
      fenleiActive: 0,
      // 排序的数组
      paixuArr: [
        { txt: "全部", min: 0, max: 50000 },
        { txt: "我能兑换的", min: 0, max: 100 },
        { txt: "0-500分", min: 0, max: 500 },
        { txt: "500-1000分", min: 500, max: 1000 },
        { txt: "1000-2500分", min: 1000, max: 2500 },
        { txt: "2500-10000分", min: 2500, max: 10000 },
        { txt: "10000-100000分", min: 10000, max: 100000 }
      ],
      // 分类的数组
      fenleiArr: [
        { txt: "全部", value: 0 },
        { txt: "实物商品", value: 1 },
        { txt: "虚拟商品", value: 2 }
      ],
      //   商品数组
      goodsArr: [],
      // 要显示的数组
      goodsListShow: [],
      // 当前第几页数据
      page: 1,
      // 每页8个
      size: 8,
      // 是否是否正在加载下一页的数据
      isLoading: false,
      // 数据是否已经到达底部(到达了底部 则表示 加载完毕)
      isReachBottom: false
    };
  },
  mutations: {
    changeGoodsObj(state, payload) {
      console.log(state, payload);
    }
  },
  watch: {
    $route: {
      handler(newVal, oldVal) {
        // 旧值和新值不一样的时候，页面要刷新
        if (newVal.query.keyword !== oldVal.query.keyword) {
          this.$router.go(0);
        }
      }
    },
    deep: true
  },
  components: {
    Products
  },
  created() {
    // 获取从搜索框过来的keyword
    if (this.$route.query.keyword) {
      this.changeGoodsObj({ keyword: this.$route.query.keyword });
    } else {
      this.changeGoodsObj({ keyword: "" });
    }
    this.getGoodsFn();
  },
  computed: {
    ...mapState({
      goodsObj: state => state.goods.goodsObj
    })
  },
  methods: {
    // 滚动事件
    scrollFn() {
      // 问题 ： 滚动操作频繁的在触发
      // 解决 ： 通过变量 控制在某一段时间内 只执行一次
      //        当屏幕高度 + 滚动距离 >= 文档的高度 - 底部的高度
      getScrollTop(), getScrollHeight(), getClientHeight();
      // 判断你滚动的高度

      // 要在这里加载后面的数据
      // 从 goodsArr 重 获取对应的索引数据，追加到 goodsListShow 数组中
      // 通过 page  和 size  获取对应的数据
      // page 1 size 8 数据索引  0-7
      // page 2 size 8 数据索引  8-15
      // page 3 size 8 数据索引  16-23
      // ...
      // 问题 ： 滚动操作频繁的在触发
      // 解决 ： 通过变量 控制在某一段时间内 只执行一次
      //        当屏幕高度 + 滚动距离 >= 文档的高度 - 底部的高度
      if (getClientHeight() + getScrollTop() >= getScrollHeight() - 100) {
        // 判断数据是否到达底部
        if (this.goodsListShow.length == this.goodsArr.length) {
          this.isReachBottom = true;
          return;
        }
        if (this.isLoading == false) {
          this.isLoading = true; // 设置为加载中的状态
          this.page++;
          console.log("准备加载下一页的数据");
          // 模拟请求数据的数据
          setTimeout(() => {
            for (
              let i = this.size * (this.page - 1);
              i < this.size * this.page;
              i++
            ) {
              // 准备push数据
              console.log("准备push数据");
              this.goodsArr[i] && this.goodsListShow.push(this.goodsArr[i]);
              console.log(this.goodsListShow);
            }
            this.isLoading = false;
          }, 1000);
        }
      }
    },
    ...mapMutations({
      changeGoodsObj: "goods/changeGoodsObj"
    }),
    //   点击了排序
    changePaixu(min, max, index) {
      window.history.replaceState(null, null, this.getURL());
      this.changeGoodsObj({ min, max, keyword: "" });
      this.paixuActive = index;
      this.getGoodsFn();
    },
    // 点击了分类
    changeFenlei(value, index) {
      window.history.replaceState(null, null, this.getURL());
      this.changeGoodsObj({ type: value, keyword: "" });
      this.fenleiActive = index;
      this.getGoodsFn();
    },
    // 发送请求
    getGoodsFn() {
      GoodsDataApi(this.goodsObj).then(res => {
        if (res.data.code === 0) {
          this.goodsArr = res.data.data;
          // 多条数据显示其中的8条
          this.goodsListShow = this.goodsArr.filter((item, index) => index < 8);
        }
      });
    },
    // 重写url地址
    getURL() {
      return window.location.href.substring(
        0,
        window.location.href.indexOf("?")
      );
    }
  },
  mounted() {
    window.addEventListener("scroll", this.scrollFn);
  }
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
.good {
  background-color: #f5f5f5;
}
.goods {
  .list {
    padding: 40px 0 10px;
    div {
      margin-bottom: 32px;
      strong {
        font-weight: bold;
        color: #000;
        margin-right: 10px;
      }
      span {
        color: #999;
        cursor: pointer;
        margin-right: 30px;
        &.active {
          color: @blue;
          font-weight: bold;
        }
      }
    }
  }
}
</style>